<template>
  <div>
    <div class="w-700px h-700px overflow-hidden">
      <div id="ws-real-player" height="500"></div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, nextTick } from 'vue'
import PlayerManager from './icc/PlayerManager'

const realPlayer = ref(null)

onMounted(() => {
  nextTick(() => {
    realPlayer.value = new PlayerManager({
      // prefixUrl: '/lib',
      el: 'ws-real-player', /** 实时预览容器id，创建多个播放器，传入不同的容器id即可 **/
      type: 'real', /** real - 实时预览  record - 录像回放 **/
      maxNum: 25, /** 一个播放器上限能播放的路数，可根据实际情况设置，支持 1 4 9 16 25 **/
      num: 1, /** 初始化，页面显示的路数 **/
      showControl: true, /** 是否显示工具栏，默认显示 **/
      prefixUrl: 'lib', /** 解码库所在位置的前缀 **/
      receiveMessageFromWSPlayer: (methods, data, err) => { /* 回调函数，可以在以下回调函数里面做监听 */
        switch (methods) {
          case 'initializationCompleted':
            // 初始化完成，可调用播放方法（适用于动态加载解码库）
            // 若回调未触发时就使用实时预览/录像回放，则无法播放。
            // 如果需要自定义窗口, 请再此调用增加自定义方法
            realPlayer.value.createCustomDom('custom-domid') // 给一个domid的唯一id名称(并非dom的id)

            realPlayer.value.playRealVideo({
              channelList: [{
                id: '1000019$1$0$2', // {String} 通道编码 -- 用于预览，必填
                deviceCode: '1000019$1$0$4' // {String} 设备编码 -- 用于对讲，对讲必填，无对讲功能可不填
              }],
              streamType: 1, // {Number} 码流类型 1-主码流 2-辅码流
              windowIndex: 0 // {Number} 播放窗口序号（从0开始）
            })
            break
        }
      }
    })
  })
})

</script>
